<template>
    <div class="container app-container">
        <div class="title" style="margin:20px 0 20px 0;height:20px;line-height:20px;border-left:1px solid #CCC;text-indent:15px;">企业认证信息</div>
        <div class="form">
            <el-descriptions :column="1" title="| 基础信息" :label-style="{ marginLeft: '40px' }" label-width="150px">
                <!-- 遍历字段 -->
                    <!-- 图片 -->
                        <el-descriptions-item label="营业执照">
                            <el-image
                                    :key="index"
                                    :src="form.businessLicenseImg"
                                    fit="contain"
                                    style="width: 100px; height: 100px; margin-right: 10px"
                            ></el-image>
                        </el-descriptions-item>
                    <!-- 图片 -->
                        <el-descriptions-item label="真实企业名称">{{ form.companyName }}</el-descriptions-item>
                    <!-- 图片 -->
                        <el-descriptions-item label="营业执照号">{{ form.businessLicenseNo }}</el-descriptions-item>
                    <!-- 图片 -->
                        <el-descriptions-item label="法人手机号">{{ form.corpMobile }}</el-descriptions-item>
                    <!-- 图片 -->
                        <el-descriptions-item label="法人身份证正面">
                            <el-image
                                    :key="index"
                                    :src="form.corpIdentityFront"
                                    fit="contain"
                                    style="width: 100px; height: 100px; margin-right: 10px"
                            ></el-image>
                        </el-descriptions-item>
                    <!-- 图片 -->
                        <el-descriptions-item label="法人身份证背面">
                            <el-image
                                    :key="index"
                                    :src="form.corpIdentityBack"
                                    fit="contain"
                                    style="width: 100px; height: 100px; margin-right: 10px"
                            ></el-image>
                        </el-descriptions-item>
                    <!-- 图片 -->
                        <el-descriptions-item label="法人姓名">{{ form.corpName }}</el-descriptions-item>
                    <!-- 图片 -->
                        <el-descriptions-item label="身份证号码">{{ form.corpIdentityCard }}</el-descriptions-item>
                    <!-- 图片 -->
                        <el-descriptions-item label="身份证有效期">{{ form.corpIdentityStart }}</el-descriptions-item>
                    <!-- 图片 -->
                        <el-descriptions-item label="身份证地址">{{ form.corpIdentityAddress }}</el-descriptions-item>
                    <!-- 图片 -->
                        <el-descriptions-item label="发证机关名称">{{ form.corpIdentityOrg }}</el-descriptions-item>
                    <!-- 图片 -->
                        <el-descriptions-item label="水路运输许可证">
                            <el-image
                                    :key="index"
                                    :src="form.waterTransportImg"
                                    fit="contain"
                                    style="width: 100px; height: 100px; margin-right: 10px"
                            ></el-image>
                        </el-descriptions-item>
                    <!-- 图片 -->
                        <el-descriptions-item label="水路运输许可证号">{{ form.waterTransportNo }}</el-descriptions-item>
                <!-- 遍历字段 -->
            </el-descriptions>
        </div>

    </div>
</template>

<script>
    // 导入接口方法
    import { fetchCompanyAuth } from '@/api/enterprise/index';

    export default {
        // 要改命名，比如课程编辑页可以叫 courseAddOrUpdate
        name: 'CompanyAuthDetail',
        dicts: [],
        components: {},
        data() {
            return {
                // 标题
                title: '企业认证信息',
                // 初始化 id 为 null
                id: null,
                // 表单参数
                form: {
                            businessLicenseImg: null,
                            companyName: '',
                            businessLicenseNo: '',
                            corpMobile: '',
                            corpIdentityFront: null,
                            corpIdentityBack: null,
                            corpName: '',
                            corpIdentityCard: '',
                            corpIdentityStart: '',
                            corpIdentityAddress: '',
                            corpIdentityOrg: '',
                            waterTransportImg: null,
                            waterTransportNo: '',
                },
            };
        },
        created() {
            // 通过 $route.params 获取路由参数
            this.id = this.$route.query.id ? this.$route.query.id : null;
            console.log(this.id);
            // 判断是否存在 id 参数
            this.isEdit = !!this.id;
            if (this.isEdit) {
                // 如果存在 id 参数，则说明当前页面是修改状态
                // 可以根据 id 参数获取需要修改的数据
                this.getDetail(this.id);
            } else {
                // 如果不存在 id 参数，则说明当前页面是新增状态
            }
        },
        mounted() {},
        methods: {
            // 表单重置
            reset() {
                this.form = {
                            businessLicenseImg: null,
                            companyName: '',
                            businessLicenseNo: '',
                            corpMobile: '',
                            corpIdentityFront: null,
                            corpIdentityBack: null,
                            corpName: '',
                            corpIdentityCard: '',
                            corpIdentityStart: '',
                            corpIdentityAddress: '',
                            corpIdentityOrg: '',
                            waterTransportImg: null,
                            waterTransportNo: '',
                };
                this.resetForm('form');
            },

            /** 获取form表单数据 */
            async getDetail(id) {
                try {
                    const res = await fetchCompanyAuth(id);
                    if (res.code == 200) {
                        const {
                            businessLicenseImg,companyName,businessLicenseNo,corpMobile,corpIdentityFront,corpIdentityBack,corpName,corpIdentityCard,corpIdentityStart,corpIdentityAddress,corpIdentityOrg,waterTransportImg,waterTransportNo,
                        } = res.data;

                        this.form = {
                                businessLicenseImg,
                                companyName,
                                businessLicenseNo,
                                corpMobile,
                                corpIdentityFront,
                                corpIdentityBack,
                                corpName,
                                corpIdentityCard,
                                corpIdentityStart,
                                corpIdentityAddress,
                                corpIdentityOrg,
                                waterTransportImg,
                                waterTransportNo,
                        };
                    }
                } catch (err) {
                    console.error(err);
                }
            },

            /** 关闭按钮 */
            close() {
                // 跳转地址 和 携带参数
                const obj = {
                    path: '/enterprise/enterpriseList',
                    query: {
                        t: Date.now(),
                        pageNum: this.$route.query.pageNum
                    },
                };
                this.$tab.closeOpenPage(obj).then(() => {
                    this.$tab.refreshPage(obj);
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .container { position: relative; }
    .submit-btn { position: fixed; bottom: 10px; left: 50%;}
</style>
